<template>
  <div class="storyteller-voice-panel">
    <div class="panel-overlay" @click="$emit('close')"></div>
    
    <div class="panel-content">
      <!-- 面板头部 -->
      <div class="panel-header">
        <h3>🎭 说书人语音控制台</h3>
        <button @click="$emit('close')" class="close-btn">✕</button>
      </div>

      <!-- 全局控制 -->
      <div class="global-controls">
        <h4>🌍 全局控制</h4>
        <div class="control-grid">
          <div class="control-item">
            <label>
              <input 
                type="checkbox" 
                v-model="globalSettings.publicChatEnabled"
                @change="updateGlobalSettings"
              >
              启用公共聊天
            </label>
          </div>
          
          <div class="control-item">
            <label>
              <input 
                type="checkbox" 
                v-model="globalSettings.privateChatEnabled"
                @change="updateGlobalSettings"
              >
              启用私人聊天
            </label>
          </div>
          
          <div class="control-item">
            <label>
              <input 
                type="checkbox" 
                v-model="globalSettings.globalMute"
                @change="updateGlobalSettings"
              >
              全局禁音
            </label>
          </div>
        </div>
        
        <div class="quick-actions">
          <button @click="muteAllPlayers" class="danger-btn">
            🔇 全体禁音
          </button>
          <button @click="unmuteAllPlayers" class="success-btn">
            🔊 全体解除禁音
          </button>
          <button @click="kickAllFromPublic" class="warning-btn">
            📢 清空公共聊天
          </button>
        </div>
      </div>

      <!-- 玩家管理 -->
      <div class="player-management">
        <h4>👥 玩家管理</h4>
        
        <!-- 搜索和过滤 -->
        <div class="player-filters">
          <input 
            type="text" 
            v-model="playerSearchQuery"
            placeholder="搜索玩家..."
            class="search-input"
          >
          <select v-model="playerFilter" class="filter-select">
            <option value="all">所有玩家</option>
            <option value="speaking">正在说话</option>
            <option value="muted">已禁音</option>
            <option value="in-public">在公共聊天</option>
            <option value="in-private">在私人聊天</option>
          </select>
        </div>

        <!-- 玩家列表 -->
        <div class="players-list">
          <div 
            v-for="player in filteredPlayers" 
            :key="player.id"
            class="player-card"
            :class="{ 
              speaking: isSpeaking(player.id),
              muted: isPlayerMuted(player.id),
              selected: selectedPlayers.includes(player.id)
            }"
            @click="togglePlayerSelection(player.id)"
          >
            <div class="player-info">
              <div class="player-avatar">
                {{ player.name.charAt(0) }}
              </div>
              <div class="player-details">
                <span class="player-name">{{ player.name }}</span>
                <div class="player-status">
                  <span v-if="isSpeaking(player.id)" class="status-speaking">🗣️ 说话中</span>
                  <span v-if="isPlayerMuted(player.id)" class="status-muted">🔇 已禁音</span>
                  <span v-if="isInPublicChat(player.id)" class="status-public">📢 公聊</span>
                  <span v-if="getPrivateChatsCount(player.id) > 0" class="status-private">
                    👥 私聊({{ getPrivateChatsCount(player.id) }})
                  </span>
                </div>
              </div>
            </div>
            
            <div class="player-controls">
              <!-- 连接质量 -->
              <div 
                :class="['connection-quality', getConnectionQuality(player.id)]"
                :title="getConnectionStatusText(player.id)"
              >
                📶
              </div>
              
              <!-- 音量控制 -->
              <div class="volume-control">
                <input 
                  type="range" 
                  min="0" 
                  max="100" 
                  v-model="playerVolumes[player.id]"
                  @input="updatePlayerVolume(player.id, $event.target.value)"
                  class="volume-slider"
                >
              </div>
              
              <!-- 快速操作 -->
              <div class="quick-controls">
                <button 
                  @click.stop="togglePlayerMute(player.id)"
                  :class="['mute-btn', { active: isPlayerMuted(player.id) }]"
                >
                  {{ isPlayerMuted(player.id) ? '🔇' : '🎤' }}
                </button>
                
                <button 
                  @click.stop="kickFromPublicChat(player.id)"
                  class="kick-btn"
                  :disabled="!isInPublicChat(player.id)"
                >
                  📢❌
                </button>
                
                <button 
                  @click.stop="inviteToPrivateChat(player.id)"
                  class="invite-btn"
                >
                  👥➕
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 批量操作 -->
        <div class="batch-operations" v-if="selectedPlayers.length > 0">
          <h5>批量操作 ({{ selectedPlayers.length }} 个玩家)</h5>
          <div class="batch-controls">
            <button @click="batchMuteSelected" class="batch-btn danger">
              🔇 禁音选中
            </button>
            <button @click="batchUnmuteSelected" class="batch-btn success">
              🔊 解除禁音
            </button>
            <button @click="batchKickFromPublic" class="batch-btn warning">
              📢❌ 踢出公聊
            </button>
            <button @click="clearSelection" class="batch-btn neutral">
              ❌ 清空选择
            </button>
          </div>
        </div>
      </div>

      <!-- 聊天室监控 -->
      <div class="chat-monitoring">
        <h4>📊 聊天室监控</h4>
        
        <!-- 统计信息 -->
        <div class="stats-grid">
          <div class="stat-card">
            <div class="stat-number">{{ publicChatStats.participants }}</div>
            <div class="stat-label">公共聊天参与者</div>
          </div>
          
          <div class="stat-card">
            <div class="stat-number">{{ privateChatStats.activeRooms }}</div>
            <div class="stat-label">活跃私聊室</div>
          </div>
          
          <div class="stat-card">
            <div class="stat-number">{{ connectionStats.totalConnections }}</div>
            <div class="stat-label">总连接数</div>
          </div>
          
          <div class="stat-card">
            <div class="stat-number">{{ Math.round(connectionStats.averageQuality * 100) }}%</div>
            <div class="stat-label">平均连接质量</div>
          </div>
        </div>

        <!-- 活跃聊天室 -->
        <div class="active-chats">
          <h5>活跃聊天室</h5>
          
          <!-- 公共聊天 -->
          <div v-if="publicChatStats.participants > 0" class="chat-room-monitor public">
            <div class="room-header">
              <span class="room-title">📢 公共聊天</span>
              <span class="participant-count">{{ publicChatStats.participants }} 人</span>
            </div>
            <div class="room-participants">
              <span 
                v-for="participantId in publicChatParticipants" 
                :key="participantId"
                class="participant-tag"
                :class="{ speaking: isSpeaking(participantId) }"
              >
                {{ getPlayerName(participantId) }}
              </span>
            </div>
          </div>

          <!-- 私人聊天室 -->
          <div 
            v-for="privateChat in activePrivateChats" 
            :key="privateChat.roomId"
            class="chat-room-monitor private"
          >
            <div class="room-header">
              <span class="room-title">👥 私聊</span>
              <span class="participant-count">{{ privateChat.participants.length }} 人</span>
              <button 
                @click="terminatePrivateChat(privateChat.roomId)"
                class="terminate-btn"
              >
                ❌
              </button>
            </div>
            <div class="room-participants">
              <span 
                v-for="participantId in privateChat.participants" 
                :key="participantId"
                class="participant-tag"
                :class="{ speaking: isSpeaking(participantId) }"
              >
                {{ getPlayerName(participantId) }}
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 测试控制（开发模式） -->
      <div v-if="testMode" class="test-controls">
        <h4>🧪 测试控制</h4>
        <div class="test-actions">
          <button @click="simulateSpeaking" class="test-btn">
            🗣️ 模拟说话
          </button>
          <button @click="simulateConnectionIssue" class="test-btn">
            📶❌ 模拟连接问题
          </button>
          <button @click="simulatePrivateChatRequest" class="test-btn">
            👥➕ 模拟私聊申请
          </button>
          <button @click="generateTestReport" class="test-btn">
            📋 生成测试报告
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex';

export default {
  name: 'StorytellerVoicePanel',
  data() {
    return {
      playerSearchQuery: '',
      playerFilter: 'all',
      selectedPlayers: [],
      playerVolumes: {},
      globalSettings: {
        publicChatEnabled: true,
        privateChatEnabled: true,
        globalMute: false
      },
      speakingSimulation: new Set(),
      connectionSimulation: new Map()
    };
  },
  computed: {
    ...mapState('voiceChat', [
      'permissions', 
      'chatRooms', 
      'playerPermissions',
      'testMode',
      'connectionStates'
    ]),
    ...mapState('players', ['players']),
    ...mapGetters('voiceChat', [
      'activeChatRooms',
      'connectionQualityStats'
    ]),
    
    // 过滤后的玩家列表
    filteredPlayers() {
      let filtered = this.players.filter(player => !player.isStoryteller);
      
      // 搜索过滤
      if (this.playerSearchQuery) {
        const query = this.playerSearchQuery.toLowerCase();
        filtered = filtered.filter(player => 
          player.name.toLowerCase().includes(query)
        );
      }
      
      // 状态过滤
      switch (this.playerFilter) {
        case 'speaking':
          filtered = filtered.filter(player => this.isSpeaking(player.id));
          break;
        case 'muted':
          filtered = filtered.filter(player => this.isPlayerMuted(player.id));
          break;
        case 'in-public':
          filtered = filtered.filter(player => this.isInPublicChat(player.id));
          break;
        case 'in-private':
          filtered = filtered.filter(player => this.getPrivateChatsCount(player.id) > 0);
          break;
      }
      
      return filtered;
    },
    
    // 公共聊天统计
    publicChatStats() {
      console.log('📊 说书人面板 - 公共聊天状态:', this.chatRooms.public);
      console.log('📍 说书人sessionId:', this.$store.state.session.sessionId);
      return {
        participants: this.chatRooms.public.participants?.length || 0,
        active: this.chatRooms.public.active
      };
    },
    
    publicChatParticipants() {
      return this.chatRooms.public.participants || [];
    },
    
    // 私聊统计
    privateChatStats() {
      const activeRooms = Array.from(this.chatRooms.private.values())
        .filter(room => room.active);
      
      return {
        activeRooms: activeRooms.length,
        totalParticipants: activeRooms.reduce((sum, room) => sum + room.participants.length, 0)
      };
    },
    
    activePrivateChats() {
      const chats = [];
      this.chatRooms.private.forEach((room, roomId) => {
        if (room.active) {
          chats.push({ ...room, roomId });
        }
      });
      return chats;
    },
    
    // 连接统计
    connectionStats() {
      const stats = this.connectionQualityStats;
      const total = stats.total || 1;
      
      return {
        totalConnections: stats.total,
        averageQuality: (stats.excellent * 1 + stats.good * 0.7 + stats.poor * 0.3) / total
      };
    }
  },
  methods: {
    ...mapActions('voiceChat', [
      'setGlobalMute',
      'mutePlayer',
      'monitorConnectionQuality'
    ]),
    
    // 全局设置
    updateGlobalSettings() {
      this.$store.commit('voiceChat/setGlobalPermissions', this.globalSettings);
    },
    
    muteAllPlayers() {
      const playerIds = this.players
        .filter(player => !player.isStoryteller)
        .map(player => player.id);
      
      // 更新本地状态
      playerIds.forEach(playerId => {
        this.$store.commit('voiceChat/updatePlayerPermissions', {
          playerId,
          permissions: { isMuted: true }
        });
      });
      
      // 通过WebSocket同步
      if (this.$store.state.session.socket) {
        this.$store.state.session.socket.send(JSON.stringify([
          'voice_storyteller_control',
          {
            action: 'mute_all',
            playerIds,
            storytellerId: this.$store.state.session.playerId
          }
        ]));
      }
      
      this.$toast.success(`已全体禁音 (${playerIds.length} 人)`);
    },
    
    unmuteAllPlayers() {
      const playerIds = this.players
        .filter(player => !player.isStoryteller)
        .map(player => player.id);
      
      // 更新本地状态
      playerIds.forEach(playerId => {
        this.$store.commit('voiceChat/updatePlayerPermissions', {
          playerId,
          permissions: { isMuted: false }
        });
      });
      
      // 通过WebSocket同步
      if (this.$store.state.session.socket) {
        this.$store.state.session.socket.send(JSON.stringify([
          'voice_storyteller_control',
          {
            action: 'unmute_all',
            playerIds,
            storytellerId: this.$store.state.session.playerId
          }
        ]));
      }
      
      this.$toast.success(`已全体解除禁音 (${playerIds.length} 人)`);
    },
    
    kickAllFromPublic() {
      const currentParticipants = this.$store.state.voiceChat.chatRooms.public.participants || [];
      
      // 更新本地状态
      this.$store.commit('voiceChat/updateChatRoom', {
        type: 'public',
        data: { 
          participants: [],
          active: false
        }
      });
      
      // 通过WebSocket同步
      if (this.$store.state.session.socket) {
        this.$store.state.session.socket.send(JSON.stringify([
          'voice_storyteller_control',
          {
            action: 'clear_public',
            kickedPlayers: currentParticipants,
            storytellerId: this.$store.state.session.playerId
          }
        ]));
      }
      
      this.$toast.info(`已清空公共聊天 (${currentParticipants.length} 人)`);
    },
    
    // 玩家操作
    togglePlayerSelection(playerId) {
      const index = this.selectedPlayers.indexOf(playerId);
      if (index > -1) {
        this.selectedPlayers.splice(index, 1);
      } else {
        this.selectedPlayers.push(playerId);
      }
    },
    
    togglePlayerMute(playerId) {
      const isMuted = this.isPlayerMuted(playerId);
      const newMutedState = !isMuted;
      
      // 更新本地状态
      this.$store.commit('voiceChat/updatePlayerPermissions', {
        playerId,
        permissions: { isMuted: newMutedState }
      });
      
      // 通过WebSocket同步
      if (this.$store.state.session.socket) {
        this.$store.state.session.socket.send(JSON.stringify([
          'voice_storyteller_control',
          {
            action: newMutedState ? 'mute_player' : 'unmute_player',
            playerId,
            storytellerId: this.$store.state.session.playerId,
            playerName: this.getPlayerName(playerId)
          }
        ]));
      }
      
      const playerName = this.getPlayerName(playerId);
      this.$toast.info(`${playerName} ${newMutedState ? '已禁音' : '已解除禁音'}`);
    },
    
    updatePlayerVolume(playerId, volume) {
      this.$set(this.playerVolumes, playerId, volume);
      // 在实际实现中，这里会调整WebRTC音频流的音量
    },
    
    kickFromPublicChat(playerId) {
      const participants = this.chatRooms.public.participants.filter(id => id !== playerId);
      this.$store.commit('voiceChat/updateChatRoom', {
        type: 'public',
        data: { participants }
      });
    },
    
    inviteToPrivateChat(playerId) {
      // 发送私聊邀请
      this.$store.dispatch('voiceChat/requestPrivateChat', {
        targetPlayerId: playerId
      });
    },
    
    // 批量操作
    batchMuteSelected() {
      this.selectedPlayers.forEach(playerId => {
        this.mutePlayer({ playerId, muted: true });
      });
      this.$toast.success(`已禁音 ${this.selectedPlayers.length} 个玩家`);
    },
    
    batchUnmuteSelected() {
      this.selectedPlayers.forEach(playerId => {
        this.mutePlayer({ playerId, muted: false });
      });
      this.$toast.success(`已解除禁音 ${this.selectedPlayers.length} 个玩家`);
    },
    
    batchKickFromPublic() {
      let participants = [...this.chatRooms.public.participants];
      this.selectedPlayers.forEach(playerId => {
        participants = participants.filter(id => id !== playerId);
      });
      
      this.$store.commit('voiceChat/updateChatRoom', {
        type: 'public',
        data: { participants }
      });
      
      this.$toast.info(`已将 ${this.selectedPlayers.length} 个玩家踢出公聊`);
    },
    
    clearSelection() {
      this.selectedPlayers = [];
    },
    
    // 聊天室管理
    terminatePrivateChat(roomId) {
      this.$store.commit('voiceChat/updateChatRoom', {
        type: 'private',
        roomId,
        data: { active: false }
      });
      this.$toast.info('已终止私聊');
    },
    
    // 状态检查
    isSpeaking(playerId) {
      return this.speakingSimulation.has(playerId);
    },
    
    isPlayerMuted(playerId) {
      return this.playerPermissions[playerId]?.isMuted || this.globalSettings.globalMute;
    },
    
    isInPublicChat(playerId) {
      return this.chatRooms.public.participants?.includes(playerId) || false;
    },
    
    getPrivateChatsCount(playerId) {
      let count = 0;
      this.chatRooms.private.forEach(room => {
        if (room.active && room.participants.includes(playerId)) {
          count++;
        }
      });
      return count;
    },
    
    getConnectionQuality(playerId) {
      const connection = this.connectionStates.get(playerId);
      return connection?.status || 'unknown';
    },
    
    getConnectionStatusText(playerId) {
      const connection = this.connectionStates.get(playerId);
      if (!connection) return '未知状态';
      
      const statusTexts = {
        excellent: '连接优秀',
        good: '连接良好',
        poor: '连接较差',
        failed: '连接失败'
      };
      
      return `${statusTexts[connection.status]} (${connection.ping}ms)`;
    },
    
    getPlayerName(playerId) {
      // 1) 已入座玩家名
      const player = this.players.find(p => p.id === playerId);
      if (player && player.name) return player.name;
      // 2) 服务器同步显示名（包含说书人）
      const dnMap = this.$store.state.voiceChat.displayNames;
      if (dnMap && dnMap.get && dnMap.has(playerId)) {
        const dn = dnMap.get(playerId);
        if (dn && dn.trim()) return dn.trim();
      }
      // 3) 服务器同步角色（storyteller 优先）
      const roles = this.$store.state.voiceChat.roles;
      if (roles && roles.get && roles.has(playerId) && roles.get(playerId) === 'storyteller') {
        const savedName = localStorage.getItem('storyteller_name') || '';
        const star = localStorage.getItem('storyteller_star_level') || 'trainee';
        const starIcon = { trainee: '🌟', one_star: '⭐', two_star: '⭐⭐' }[star] || '🌟';
        return savedName.trim() ? `【${starIcon}】说书人·${savedName.trim()}` : `【${starIcon}】说书人`;
      }
      // 4) 兜底
      return '【访客】';
    },
    
    // 测试功能
    simulateSpeaking() {
      const randomPlayer = this.players[Math.floor(Math.random() * this.players.length)];
      if (randomPlayer && !randomPlayer.isStoryteller) {
        this.speakingSimulation.add(randomPlayer.id);
        setTimeout(() => {
          this.speakingSimulation.delete(randomPlayer.id);
        }, 3000);
      }
    },
    
    simulateConnectionIssue() {
      const randomPlayer = this.players[Math.floor(Math.random() * this.players.length)];
      if (randomPlayer && !randomPlayer.isStoryteller) {
        this.$store.commit('voiceChat/updateConnectionState', {
          playerId: randomPlayer.id,
          connectionState: {
            status: 'poor',
            ping: Math.floor(Math.random() * 500) + 200,
            quality: 'poor',
            timestamp: Date.now()
          }
        });
      }
    },
    
    simulatePrivateChatRequest() {
      const players = this.players.filter(p => !p.isStoryteller);
      if (players.length >= 2) {
        const [from, to] = players.slice(0, 2);
        this.$store.commit('voiceChat/addPrivateChatRequest', {
          fromId: from.id,
          toId: to.id,
          type: 'private_chat_request'
        });
      }
    },
    
    generateTestReport() {
      const report = {
        timestamp: new Date().toLocaleString(),
        players: this.players.length,
        connections: this.connectionStats,
        publicChat: this.publicChatStats,
        privateChats: this.privateChatStats,
        permissions: this.globalSettings
      };
      
      console.log('语音聊天测试报告:', report);
      this.$toast.info('测试报告已生成，请查看控制台');
    }
  },
  
  mounted() {
    // 初始化玩家音量
    this.players.forEach(player => {
      this.$set(this.playerVolumes, player.id, 80);
    });
    
    // 同步全局设置
    this.globalSettings = { ...this.permissions };
    
    // 开发模式下启动模拟
    if (this.testMode) {
      setInterval(() => {
        // 随机模拟说话状态
        if (Math.random() > 0.8) {
          this.simulateSpeaking();
        }
      }, 5000);
    }
  }
};
</script>

<style lang="scss" scoped>
.storyteller-voice-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.panel-content {
  position: relative;
  background: linear-gradient(135deg, rgba(139, 69, 19, 0.95), rgba(160, 82, 45, 0.95));
  border-radius: 12px;
  width: 90vw;
  max-width: 800px;
  max-height: 85vh;
  overflow-y: auto;
  border: 2px solid rgba(255, 215, 0, 0.4);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  
  // 移动端适配
  @media (max-width: 768px) {
    width: 95vw;
    max-height: 90vh;
    border-radius: 8px;
    border-width: 1px;
  }
  
  // 平板适配
  @media (min-width: 769px) and (max-width: 1024px) {
    width: 85vw;
    max-width: 700px;
  }
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 215, 0, 0.3);
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px 12px 0 0;
  
  h3 {
    color: #FFD700;
    margin: 0;
    font-size: 18px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    font-weight: 600;
  }
  
  .close-btn {
    background: radial-gradient(at 0 -15%, rgba(255, 255, 255, 0.07) 70%, rgba(255, 255, 255, 0) 71%) 0 0/80% 90% no-repeat content-box,
               linear-gradient(#f44336, rgba(244, 67, 54, 0.3)) content-box,
               linear-gradient(#292929, #5d1a1a) border-box;
    border: 1px solid #f44336;
    color: white;
    font-size: 16px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: inset 0 1px 1px rgba(244, 67, 54, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3);
    
    &:hover {
      background: radial-gradient(at 0 -15%, rgba(255, 255, 255, 0.1) 70%, rgba(255, 255, 255, 0) 71%) 0 0/80% 90% no-repeat content-box,
                 linear-gradient(#EF5350, rgba(244, 67, 54, 0.6)) content-box,
                 linear-gradient(#292929, #7d2121) border-box;
      transform: scale(1.05);
    }
  }
  
  // 移动端适配
  @media (max-width: 768px) {
    padding: 12px 16px;
    border-radius: 8px 8px 0 0;
    
    h3 {
      font-size: 16px;
    }
    
    .close-btn {
      width: 28px;
      height: 28px;
      font-size: 14px;
    }
  }
}

.global-controls {
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  
  h4 {
    color: #FFD700;
    margin: 0 0 16px 0;
    font-size: 16px;
  }
  
  .control-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
    
    .control-item {
      label {
        display: flex;
        align-items: center;
        gap: 8px;
        color: white;
        cursor: pointer;
        
        input[type="checkbox"] {
          width: 16px;
          height: 16px;
        }
      }
    }
  }
  
  .quick-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    
    button {
      padding: 8px 16px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;
      
      &.danger-btn {
        background: rgba(244, 67, 54, 0.2);
        border: 1px solid #f44336;
        color: white;
        
        &:hover {
          background: rgba(244, 67, 54, 0.4);
        }
      }
      
      &.success-btn {
        background: rgba(76, 175, 80, 0.2);
        border: 1px solid #4CAF50;
        color: white;
        
        &:hover {
          background: rgba(76, 175, 80, 0.4);
        }
      }
      
      &.warning-btn {
        background: rgba(255, 193, 7, 0.2);
        border: 1px solid #FFC107;
        color: white;
        
        &:hover {
          background: rgba(255, 193, 7, 0.4);
        }
      }
    }
  }
}

.player-management {
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  
  h4 {
    color: #FFD700;
    margin: 0 0 16px 0;
    font-size: 16px;
  }
  
  .player-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    
    .search-input {
      flex: 1;
      padding: 8px 12px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 6px;
      background: rgba(0, 0, 0, 0.3);
      color: white;
      
      &::placeholder {
        color: rgba(255, 255, 255, 0.5);
      }
    }
    
    .filter-select {
      padding: 8px 12px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 6px;
      background: rgba(0, 0, 0, 0.3);
      color: white;
    }
  }
  
  .players-list {
    max-height: 300px;
    overflow-y: auto;
    
    .player-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px;
      margin-bottom: 8px;
      border-radius: 8px;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.1);
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        background: rgba(255, 255, 255, 0.1);
      }
      
      &.selected {
        border-color: #FFD700;
        background: rgba(255, 215, 0, 0.1);
      }
      
      &.speaking {
        border-left: 4px solid #4CAF50;
      }
      
      &.muted {
        opacity: 0.6;
        border-left: 4px solid #f44336;
      }
      
      .player-info {
        display: flex;
        align-items: center;
        gap: 12px;
        
        .player-avatar {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          background: linear-gradient(135deg, #4CAF50, #45a049);
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-weight: bold;
          font-size: 14px;
        }
        
        .player-details {
          .player-name {
            color: white;
            font-weight: 500;
            display: block;
            margin-bottom: 4px;
          }
          
          .player-status {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            
            span {
              font-size: 11px;
              padding: 2px 6px;
              border-radius: 3px;
              
              &.status-speaking {
                background: rgba(76, 175, 80, 0.3);
                color: #4CAF50;
              }
              
              &.status-muted {
                background: rgba(244, 67, 54, 0.3);
                color: #f44336;
              }
              
              &.status-public {
                background: rgba(33, 150, 243, 0.3);
                color: #2196F3;
              }
              
              &.status-private {
                background: rgba(156, 39, 176, 0.3);
                color: #9C27B0;
              }
            }
          }
        }
      }
      
      .player-controls {
        display: flex;
        align-items: center;
        gap: 8px;
        
        .connection-quality {
          font-size: 12px;
          
          &.excellent { color: #4CAF50; }
          &.good { color: #FFC107; }
          &.poor { color: #f44336; }
        }
        
        .volume-control {
          .volume-slider {
            width: 60px;
          }
        }
        
        .quick-controls {
          display: flex;
          gap: 4px;
          
          button {
            background: none;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 4px;
            padding: 4px 6px;
            cursor: pointer;
            font-size: 12px;
            
            &:hover {
              background: rgba(255, 255, 255, 0.1);
            }
            
            &.mute-btn.active {
              background: rgba(244, 67, 54, 0.3);
              border-color: #f44336;
            }
            
            &:disabled {
              opacity: 0.5;
              cursor: not-allowed;
            }
          }
        }
      }
    }
  }
  
  .batch-operations {
    margin-top: 16px;
    padding: 12px;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    
    h5 {
      color: #FFD700;
      margin: 0 0 8px 0;
      font-size: 14px;
    }
    
    .batch-controls {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      
      .batch-btn {
        padding: 6px 12px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
        
        &.danger { background: rgba(244, 67, 54, 0.3); color: white; }
        &.success { background: rgba(76, 175, 80, 0.3); color: white; }
        &.warning { background: rgba(255, 193, 7, 0.3); color: white; }
        &.neutral { background: rgba(158, 158, 158, 0.3); color: white; }
      }
    }
  }
}

.chat-monitoring {
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  
  h4, h5 {
    color: #FFD700;
    margin: 0 0 16px 0;
    font-size: 16px;
  }
  
  h5 { font-size: 14px; margin-bottom: 12px; }
  
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
    
    .stat-card {
      text-align: center;
      padding: 12px;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      
      .stat-number {
        color: #FFD700;
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 4px;
      }
      
      .stat-label {
        color: rgba(255, 255, 255, 0.7);
        font-size: 11px;
      }
    }
  }
  
  .active-chats {
    .chat-room-monitor {
      padding: 8px 12px;
      margin-bottom: 8px;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      
      &.public {
        background: rgba(33, 150, 243, 0.1);
        border-color: rgba(33, 150, 243, 0.3);
      }
      
      &.private {
        background: rgba(156, 39, 176, 0.1);
        border-color: rgba(156, 39, 176, 0.3);
      }
      
      .room-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
        
        .room-title {
          color: white;
          font-weight: 500;
          font-size: 13px;
        }
        
        .participant-count {
          color: rgba(255, 255, 255, 0.7);
          font-size: 12px;
        }
        
        .terminate-btn {
          background: none;
          border: none;
          color: #f44336;
          cursor: pointer;
          font-size: 12px;
        }
      }
      
      .room-participants {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        
        .participant-tag {
          background: rgba(255, 255, 255, 0.1);
          padding: 2px 6px;
          border-radius: 3px;
          font-size: 11px;
          color: white;
          
          &.speaking {
            background: rgba(76, 175, 80, 0.3);
            color: #4CAF50;
          }
        }
      }
    }
  }
}

.test-controls {
  padding: 20px;
  
  h4 {
    color: #FFD700;
    margin: 0 0 16px 0;
    font-size: 16px;
  }
  
  .test-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    
    .test-btn {
      background: rgba(255, 193, 7, 0.2);
      border: 1px solid #FFC107;
      border-radius: 4px;
      padding: 6px 12px;
      color: white;
      cursor: pointer;
      font-size: 12px;
      
      &:hover {
        background: rgba(255, 193, 7, 0.4);
      }
    }
  }
}

// 自定义滚动条
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.3);
  border-radius: 3px;
  
  &:hover {
    background: rgba(255, 215, 0, 0.5);
  }
}
</style>